<template>
	<div>
		<div class="top">
			<div class="person-info">
				<div class="flexCenter">
					<!--<img src="//y.gtimg.cn/music/photo_new/T002R300x300M0000007BYT74PyoOO.jpg" alt="">-->
					<img src="../images/gdlogo.png" alt="">
				</div>
			</div>
		</div>
		<div class="container">

			<div class="cell flexLeft">
				<span class="iconfont icon-shouji"></span>
				<input type="tel" v-model="info.userId" placeholder="请输入账号">
			</div>
			<div class="cell flexLeft">
				<span class="iconfont icon-mima"></span>
				<input type="password" v-model="password" placeholder="请输入密码">
			</div>

			<div class="flexAround">
				<label class="registerType" for="guider">
					<input value="1" v-model="info.UserType" name="type" id="guider" type="radio">
					管理员
				</label>
				<label class="registerType" for="customer">
					<input value="2" v-model="info.UserType" name="type" id="customer" type="radio">
					维护员
				</label>
			</div>
			<button @click="login" :class="{'btn-big-error':info.userId.length==6,'btn-big-default':info.userId.length!=6}"
			 class="btn-big">登录
			</button>


			<!-- <button @click="ToastPlugin" class="btn-big btn-big-error" style="margin-top: 20px;">my Toast plugin</button> -->
			 <!-- <loading duration='10s' :isshow='show'></loading> -->

		</div>
	</div>
</template>

<script>
	import {
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		setStoreSession,
		getStoreSession
	} from '../config/mUtils'
	export default {
		name: "login",
		data() {
			return {
				show:true,
				info: {
					userId: "001761",
					password: "",
					UserType: '1'
				},
				password: "gd-iot@321",

			}
		},
		methods: {
			...mapMutations([
				'setUserType'
			]),
			ToastPlugin(){
				this.$mytoast('my ToastPlugin',5000)
			},
			Mutations() {
				this.setUserType(this.info.UserType)
			},
			forgetPwd() {
				this.$router.push({
					path: '/forgetPwd',
					query: {
						eid: this.info.eid
					}
				})
			},
			goRegister() {
				this.$router.push({
					path: '/register',
					query: {
						eid: this.info.eid
					}
				})
			},
			goMallIndex() {
				//replace不会在history中留下记录，就能禁止返回到登录页了
				this.$router.replace({
					path: '/mallIndex'
				})
			},
			login() {
				this.info.password=this.$md5(this.password+'{1q@!}');
				this.$axios.post('gdiot/user/login', this.info).then((p) => {
					if (p.data.msg == 'success' && p.data.error == '100') {
						setStoreSession('userInfo', p.data.result);
						this.$mint.Toast({
							message: '登录成功',
							iconClass: 'iconfont icon-dui',
							duration: 1500
						});
						setTimeout(() => {
							this.Mutations();
							sessionStorage.setItem('UserType',this.info.UserType)
							this.goMallIndex();
						}, 1500)
					} else {
						this.$mint.Toast({
							message: p.data.msg,
							iconClass: 'iconfont icon-cuo',
							duration: 1800
						});
					}
				})
			},
			//手机系统类型
			systemType() {
				var u = navigator.userAgent,
					app = navigator.appVersion;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				if (isAndroid) { //这个是安卓操作系统
					return 'sys_android'
				}
				if (isIOS) { //这个是ios操作系统
					return 'sys_ios'
				}
			},
			//客户端是android 还是ios
			clientType() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return 'client_android'
				} else {
					return 'client_ios'
				}
			}
		},
		created() {
			if (this.$route.query.phone) {
				this.info.UserPhone = this.$route.query.phone;
				this.info.UserPwd = this.$route.query.pwd;
				this.info.UserType = this.$route.query.userType;
			}
			if (this.$route.query.eid) {
				this.info.eid = this.$route.query.eid;
			}
		},
		mounted() {
			// console.log(this.$md5('holle'))
		}
	}
</script>

<style lang="scss">
	body {
		background: white;
	}

	.top {
		position: relative;

		.person-info {
			padding: 2.13rem 0;

			img {
				width: 2.99rem;
				height: 2.99rem;
				/*border-radius: 100%;*/
			}
		}
	}

	.container {
		width: 90%;
		margin: 0 auto;

		.cell {
			border-bottom: 1px solid #E7EAED;
			padding-bottom: 5px;
			margin-bottom: 10px;

			.iconfont {
				font-size: 1rem;
				margin-right: 0.43rem;
				margin-left: 0.43rem;
				color: #B8B8B8;
			}

			input {
				flex: 1;
				background: none;
				height: 1.49rem;
				border: none;
				outline: none;
				font-size: 16px;
			}
		}

		.tips {
			span {
				color: #B8B8B8;
				font-size: 0.51rem;
				margin-top: 0.43rem;
				padding: 0.43rem;
			}
		}
	}

	.registerType {
		font-size: 0.68rem;
		margin: 0.43rem 0 0.64rem;
		color: #B8B8B8;

		input {
			margin-left: 0.43rem;
		}
	}
</style>
